<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Spark simple map example</title>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://km.aifb.kit.edu/sites/spark/src/jquery.spark.js"></script>
    <link rel="stylesheet" type="text/css" media="screen, projection"
          href="http://liris.cnrs.fr/~pchampin/spark/spark-css/screen.css" >

    <link rel="stylesheet" type="text/css" media="print"
          href="http://liris.cnrs.fr/~pchampin/spark/sparl-css/print.css" >

    <!-- it would be good to make this automatic in spark.gmapv3.js -->
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false" ></script>

    <!-- the following is required by Chrome when running on file: URIs
    <script type="text/javascript"
            src="http://liris.cnrs.fr/~pchampin/spark/spark.gmapv3.js" ></script>-->


  </head>
  <body>

    <div class="container">
      <div class="span-24 last prepend-top">
        <h1>Spark map example</h1>
        <p>
          The following map is a spark showing the result of a
          query to DBpedia asking for Holy cities. Below is a
          table containing the same results.

          <div class="spark" id="map_canvas" style="height: 400px"
            data-spark-endpoint="http://dbpedia.org/sparql"
            data-spark-format="http://liris.cnrs.fr/~pchampin/spark/spark.gmapv3.js"
            data-spark-param-zoom="2"
            data-spark-param-center="Cairo, Egypt"
            data-spark-query="
              PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
              PREFIX dbpedia-owl: <http://dbpedia.org/ontology/>
              PREFIX foaf: <http://xmlns.com/foaf/0.1/>

              SELECT ?name ?lat ?long
              WHERE {
 ?a a &lt;http://dbpedia.org/class/yago/HolyCities&gt; .
 ?a foaf:name ?name .
 ?a geo:lat ?lat .
 ?a geo:long ?long .
              }
            "
            data-spark-param-latitude="lat"
            data-spark-param-longitude="long"
            data-spark-param-label="name"
          >

            <em>loading&hellip;</em>
          </div><br />

          <div class="spark"
            data-spark-endpoint="http://dbpedia.org/sparql"
            data-spark-format="http://km.aifb.kit.edu/sites/spark/src/jquery.spark.simpletable.js"
            data-spark-query="
              PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
              PREFIX dbpedia-owl: <http://dbpedia.org/ontology/>
              PREFIX foaf: <http://xmlns.com/foaf/0.1/>

              SELECT ?name ?lat ?long
              WHERE {
 ?a a &lt;http://dbpedia.org/class/yago/HolyCities&gt; .
 ?a foaf:name ?name .
 ?a geo:lat ?lat .
 ?a geo:long ?long .
              }"
          >

            <em>loading&hellip;</em>
          </div>
        </p>
        <p>
          <a href="index.html">[back to gallery]</a>
        </p>

      </div>
    </div>

  </body>
</html>
